<template>
  <div class="container">
    <!-- 查询条件 -->
    <el-form v-show="showSearch" :inline="true" :model="searchForm" size="small" class="demo-form-inline"
      label-suffix="：">
      <el-form-item label="企业名称">
        <el-input v-model="searchForm.departmentName" clearable></el-input>
      </el-form-item>
    </el-form>
    <div class="dis-o-between operate-line">
      <div>
        <el-button icon="el-icon-plus" plain type="primary" @click="add()" size="small">新增</el-button>
        <el-button icon="el-icon-search" type="primary" @click="reqTableData" size="small">查询</el-button>
      </div>
      <RightToolbar :showSearch.sync="showSearch" @queryTable="reqTableData"></RightToolbar>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border :tree-props="{ children: 'list' }" row-key="departmentUuid">
      <el-table-column label="组织/部门名称" prop="departmentName"></el-table-column>
      <el-table-column label="操作" width="250px" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.departmentGrade !== 4" size="small" type="text" @click="add(scope.row)">
            {{ getIndex(scope.row) }}
          </el-button>
          <el-button size="small" type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width='550px'>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="right" label-width="100px">
        <el-form-item v-if="!ruleForm.departmentGrade" label="企业名称" prop="departmentName">
          <el-input v-model="ruleForm.departmentName"></el-input>
        </el-form-item>
        <el-form-item v-if="ruleForm.departmentGrade" label="部门名称" prop="departmentName">
          <el-input v-model="ruleForm.departmentName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'organization',
  data() {
    return {
      showSearch: true,
      loading: false,
      searchForm: {},
      tableData: [],
      title: '',
      dialogVisible: false,
      ruleForm: {},
      rules: {
        departmentName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
      },
    };
  },
  props: {},

  components: {},

  created() { },

  mounted() {
    this.reqTableData()
  },

  beforeDestroy() { },

  methods: {
    getIndex(row) {
      let data = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
      if (row.departmentGrade == null) {
        return '新增一级部门'
      } else {
        return `新增${data[Number(row.departmentGrade)]}级部门`
      }
    },
    reqTableData() {
      this.loading = true;
      this.tableData = []
      let data = {
        ...this.searchForm
      }
      this.sendPost('/enterpriseDepartment/getEnterpriseDepartmentTree', data).then((res) => {
        if (res.errcode == 0) {
          this.tableData = res.data.list || [];
        } else {
          this.err({ message: res.errmsg })
        }
        this.$nextTick(() => this.loading = false)
      })
    },
    add(row) {
      if (row) {
        this.ruleForm = {}
        if (!row.departmentGrade) {
          this.ruleForm.departmentGrade = 1;
          this.ruleForm.belongEnterpriseUuid = row.departmentUuid;
          this.ruleForm.belongEnterpriseName = row.departmentName;
        } else {
          this.ruleForm.departmentGrade = Number(row.departmentGrade) + 1;
          this.ruleForm.belongDepartmentUuid = row.departmentUuid;
          this.ruleForm.belongDepartmentName = row.departmentName;
          this.ruleForm.belongEnterpriseUuid = row.belongEnterpriseUuid;
          this.ruleForm.belongEnterpriseName = row.belongEnterpriseName;
        }
      } else {
        this.ruleForm = {
          departmentGrade: 0
        }
      }
      this.title = '新增企业';
      this.dialogVisible = true
    },
    edit(row) {
      this.ruleForm = JSON.parse(JSON.stringify(row));
      this.title = '编辑';
      this.dialogVisible = true;
    },
    del(row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.sendGet('/enterpriseDepartment/delete', { id: row.id }).then((res) => {
          if (res.errcode == 0) {
            this.suc({ message: res.errmsg })
            this.reqTableData()
          } else {
            this.err({ message: res.errmsg })
          }
        })
      }).catch(() => { });
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.sendPost('/enterpriseDepartment/insertOrUpdateEnterpriseDepartment', this.ruleForm).then((res) => {
            if (res.errcode == 0) {
              this.suc({ message: res.errmsg })
              this.dialogVisible = false;
              this.reqTableData()
            } else {
              this.err({ message: res.errmsg })
            }
          })
        } else {
          return false;
        }
      });

    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {}
};
</script>

<style scoped lang="scss"></style>
